<template>
  <div class="page-buttons">
    <h3>button component</h3>
    <!-- <el-button  type="primary">el-button</el-button> -->

    <div class="buttons">
      ..default
      <div class="button__item">
        <mx-button @click="toClick">default</mx-button>
        <mx-button type="primary" @click="toClick">primary</mx-button>
        <mx-button type="success" @click="toClick">success</mx-button>
        <mx-button type="info" @click="toClick">info</mx-button>
        <mx-button type="danger" @click="toClick">danger</mx-button>
      </div>
      ..plain
      <div class="button__item">
        <mx-button plain @click="toClick">default </mx-button>
        <mx-button type="primary" plain @click="toClick">primary</mx-button>
        <mx-button type="success" plain @click="toClick">success</mx-button>
        <mx-button type="info" plain @click="toClick">info</mx-button>
        <mx-button type="danger" plain @click="toClick">danger</mx-button>
      </div>
      ..round
      <div class="button__item">
        <mx-button round >default </mx-button>
        <mx-button type="primary" round>primary</mx-button>
        <mx-button type="success" round>success</mx-button>
        <mx-button type="info" round>info</mx-button>
        <mx-button type="danger" round>danger</mx-button>
      </div>
      <div class="button__item">
        <mx-button icon="mx-icon-add" round>default </mx-button>
        <mx-button round>99.. <i class="mx-icon-addmessage"></i> </mx-button>
        <mx-button type="primary" icon="mx-icon-addmessage" round>primary</mx-button>
        <mx-button type="success" icon="mx-icon-addresslist" round>success</mx-button>
        <mx-button type="info" icon="mx-icon-addmessage" round>info</mx-button>
        <mx-button type="danger" icon="mx-icon-add" round>danger</mx-button>
      </div>
      ..circle
      <div class="button__item">
        <mx-button icon="mx-icon-add" circle></mx-button>
        <mx-button type="primary" icon="mx-icon-addmessage" circle></mx-button>
        <mx-button type="success" icon="mx-icon-addresslist" circle></mx-button>
        <mx-button type="info" icon="mx-icon-addmessage" circle></mx-button>
        <mx-button type="danger" icon="mx-icon-add" circle></mx-button>
      </div>
      ..disabled
      <div class="button__item">
        <mx-button disabled>default</mx-button>
        <mx-button type="primary" disabled>primary</mx-button>
        <mx-button type="success" disabled>success</mx-button>
        <mx-button type="info" disabled>info</mx-button>
        <mx-button type="danger" disabled>danger</mx-button>
      </div>
      <div class="button__item">
        <mx-button plain disabled>default</mx-button>
        <mx-button type="primary" plain disabled>primary</mx-button>
        <mx-button type="success" plain disabled>success</mx-button>
        <mx-button type="info" plain disabled>info</mx-button>
        <mx-button type="danger" plain disabled>danger</mx-button>
      </div>
      .. type="text"
      <div class="button__item button__item--text">
        <mx-button class="item-comp" type="text" plain>text</mx-button>
        <mx-button class="item-comp" type="text" plain >text-plain</mx-button>
        <mx-button class="item-comp" type="text" plain disabled round>plain-disabled-round</mx-button>
        <mx-button class="item-comp" type="text" plain disabled circle>text-plain-disabled</mx-button>
        <mx-button class="item-comp" type="text" plain disabled circle>text-plain-disabled</mx-button>
        <mx-button class="item-comp" type="text" plain round>info</mx-button>
        <mx-button class="item-comp" type="text" plain circle>danger</mx-button>
      </div>
      ..loading
      <div class="button__item">
        <mx-button icon="mx-icon-add" round :loading="true">default </mx-button>
        <mx-button type="primary" icon="mx-icon-addmessage" round :loading="true">primary</mx-button>
        <mx-button type="success" icon="mx-icon-addresslist" round :loading="true">success</mx-button>
        <mx-button type="info" icon="mx-icon-addmessage" round :loading="true">info</mx-button>
        <mx-button type="danger" icon="mx-icon-add" round :loading="true">danger</mx-button>
      </div>
      <div class="button__item">
        <mx-button icon="mx-icon-add" plain round :loading="true">default </mx-button>
        <mx-button type="primary" icon="mx-icon-addmessage" plain round :loading="true">primary</mx-button>
        <mx-button type="success" icon="mx-icon-addresslist" plain round :loading="true">success</mx-button>
        <mx-button type="info" icon="mx-icon-addmessage" plain round :loading="true">info</mx-button>
        <mx-button type="danger" icon="mx-icon-add" plain round :loading="true">danger</mx-button>
      </div>

      ..size
      <div class="button__item">
        <mx-button round>default </mx-button>
        <mx-button type="primary" round size="medium">primary medium</mx-button>
        <mx-button type="success" round size="small">success</mx-button>
        <mx-button type="info" round size="mini">info</mx-button>
        <mx-button type="danger" round size="mini">danger</mx-button>
      </div>
      <div class="button__item">
        <mx-button round plain>default </mx-button>
        <mx-button type="primary" round plain size="medium">primary medium</mx-button>
        <mx-button type="success" round plain size="small">success</mx-button>
        <mx-button type="info" round plain size="mini">info</mx-button>
        <mx-button type="danger" round plain size="mini">danger</mx-button>
      </div>
      
      ..button-group
      <div class="button__item">
         <div class="item-wrap">
           <mx-button-group>
            <mx-button type="primary" icon="mx-icon-addmessage" round plain size="medium"> medium</mx-button>
            <mx-button type="primary" icon="mx-icon-addmessage" round plain size="medium"> medium</mx-button>
            <mx-button type="primary" round plain size="medium"> medium <i class="mx-icon-addresslist"></i></mx-button>
          </mx-button-group>
          </div>
          <div class="item-wrap">
          <mx-button-group>
            <mx-button type="primary" plain size="medium"> medium</mx-button>
            <mx-button type="primary" plain size="medium" disabled> medium</mx-button>
            <mx-button type="primary" plain size="medium"> medium</mx-button>
          </mx-button-group>
          </div>
      </div>
      ..enevnt
      <div class="button__item">
        <mx-button icon="mx-icon-add" round @click="toClick">default </mx-button>
        <mx-button type="primary" icon="mx-icon-addmessage" round :loading="true" @click="toClick">primary</mx-button>
        <mx-button type="success" icon="mx-icon-addresslist" round :disabled="true" @click="toClick">success</mx-button>
      </div>
    </div>
    <br>
    <br><br>
    <!-- <mx-alert></mx-alert> -->
  </div>
</template>
<script>
export default {
  name: "page-button",
  methods: {
    toClick () {
      alert('hhh~ good job !')
    }
  }
};
</script>
<style lang="scss">
.page-buttons {
  text-align: center;
  padding: 20px;

  .buttons {
    margin: 0 auto;
    .button__item {
      padding: 10px;
    }
    .button__item--text {
      width: 60%;
      margin: 0 auto;
      display: flex;
    }
    .item-comp {
      flex: 1;
    }
    .item-wrap{
      display: inline-block;
      width: 40%;
    }
  }
}
</style>
